<template>
  <div
    :class="{
      'web-container': deviceType == 'web',
      'mobile-container': deviceType == 'mobile',
      'ipad-container': deviceType == 'ipad',
    }"
  >
    <div class="indexBanner">
      <el-image
        style="width: 100%; height: 100%"
        :src="bannerUrl"
        fit="cover"
      ></el-image>
    </div>

    <!-- 版心 -->
    <div class="pageArea">
      <!-- 祖先牌位 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">祖先牌位</div>
        </div>
        <div class="section_content">
          <div class="ancestralBanner">
            <el-image
              style="width: 100%; height: 100%"
              :src="vrenUrl"
              fit="fill"
            >
            </el-image>
          </div>
        </div>
      </div>

      <!-- 祖先祭祀 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">祖先祭祀</div>
        </div>
        <div class="section_content">
          <div
            class="worshipBox"
            v-if="deviceType == 'web' || deviceType == 'ipad'"
          >
            <div
              class="newsItem"
              :style="{ backgroundImage: 'url(' + item.newsUrl + ')' }"
              v-for="(item, index) in newsList"
              :key="index"
            >
              <div class="cardTitle">{{ item.title }}</div>
              <div class="box">
                <div class="newsArrow">
                  <i class="el-icon-right"></i>
                </div>
              </div>
            </div>
          </div>

          <!--祖先祭祀 轮播 -->
          <div class="swiper-container-news" v-if="deviceType == 'mobile'">
            <swiper :options="swiperoptionWorship" ref="mySwiper">
              <swiper-slide
                v-for="(newsItem, newsIndex) in newsList"
                :key="newsIndex"
              >
                <div class="newsItem">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="newsItem.newsUrl"
                    fit="fill"
                  >
                  </el-image>
                  <div class="mesg">
                    <div class="cardTitle">{{ newsItem.title }}</div>
                    <div class="box">
                      <div class="newsArrow">
                        <i class="el-icon-right"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>

      <!-- 活動總覽 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">活動總覽</div>
        </div>
        <div class="section_content">
          <div class="swiper-container-activities">
            <swiper :options="swiperoptionActivities" ref="mySwiper">
              <swiper-slide
                v-for="(activitiesItem, newsIndex) in slides"
                :key="newsIndex"
              >
                <div class="topImg">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="activitiesItem.swiperUrl"
                    fit="cover"
                  ></el-image>
                </div>
                <div class="bottomMsg">
                  <div class="pageH3">{{ activitiesItem.title }}</div>
                  <div class="pageH5">{{ activitiesItem.time }}</div>
                  <div
                    class="redButton"
                    @click="handleJoinSerives(activitiesItem, index)"
                  >
                    预约参加
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div class="nextPrev" v-if="deviceType == 'web' || deviceType == 'ipad'">
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </div>
          </div>
        </div>

        <!-- 活动弹窗 -->
        <el-dialog
          title=""
          :visible.sync="slideDialog"
          :width="dialogWidth + 'px' "
          :before-close="handleClose"
        >
          <!-- 内容 -->
          <div class="dialogBox">
            <div class="PopupTitle">活動標題</div>
            <div class="dialogContent">
              <div class="dialogExplain">
                <div class="item">
                  <div class="PopupContentTitle">活動日期</div>
                  <div class="PopupText">2024年7月1日-31日</div>
                </div>
                <div class="item">
                  <div class="PopupContentTitle">活動說明</div>
                  <div class="PopupText">這里是活動說明文案</div>
                  <div class="explainImg">
                    <div class="img"></div>
                    <div class="img"></div>
                    <!-- <div class="img"></div> -->
                  </div>
                </div>
              </div>
              <div class="redButton">预约参加</div>
            </div>
          </div>
        </el-dialog>
      </div>

      <!-- 日历 -->
      <div class="section">
        <div class="section_title"></div>
        <div class="section_content">
          <div class="calendar">
            <div class="calendarItem left">
              <div class="topName">農歷</div>
              <div class="timeAndshi">
                <div class="shiTop">
                  <div class="yi">
                    <div class="yiBox">易</div>
                    <div class="text">外出 休息</div>
                  </div>
                  <div class="yi">
                    <div class="yiBox jiBox">忌</div>
                    <div class="text">外出 文案 文案</div>
                  </div>
                </div>
                <div class="time">
                  <div class="month">六月二十</div>
                  <div class="other">甲辰龍年 辛末月 己亥日</div>
                </div>
              </div>
            </div>
            <div class="calendarItem right">
              <div class="topName">國曆</div>
              <div class="timeAndshi">
                <div class="time">
                  <div class="month">16</div>
                  <div class="other">2024/7/30星期四</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 服務諮詢 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">服務諮詢</div>
        </div>
        <div class="section_content">
          <div class="serivesContainer">
            <el-collapse
              v-model="activeName"
              accordion
              @change="toggleCollapse"
            >
              <el-collapse-item
                :name="item.id"
                v-for="(item, index) in serivesList"
                :key="index"
              >
                <template slot="title">
                  {{ item.title }}
                </template>
                <div>
                  {{ item.content }}
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>

      <!-- 設置神位 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">設置神位</div>
        </div>
        <div class="section_content">
          <div class="card" v-if="deviceType == 'web' || deviceType == 'ipad'">
            <div
              class="cardItem"
              v-for="(cardItem, cardIndex) in aboutList"
              :key="cardIndex"
            >
              <div class="pageH2">
                {{ cardItem.title }}
              </div>
              <div class="cardArrow">
                <i class="el-icon-right"></i>
              </div>
              <div class="cardImage">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardItem.aboutUrl"
                  fit="contain"
                ></el-image>
              </div>
            </div>
          </div>

          <!--設置神位 轮播 -->
          <div class="swiper-container" v-if="deviceType == 'mobile'">
            <swiper :options="swiperoptionAbout" ref="mySwiper">
              <swiper-slide
                v-for="(cardItem, cardIndex) in aboutList"
                :key="cardIndex"
              >
                <div class="cardItem">
                  <div class="pageH2">
                    {{ cardItem.title }}
                  </div>
                  <div class="cardArrow">
                    <i class="el-icon-right"></i>
                  </div>
                  <div class="cardImage">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="cardItem.aboutUrl"
                      fit="contain"
                    ></el-image>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Serives",
  data() {
    return {
      bannerUrl: require("@/assets/images/serives/serivesBanner.png"), //banner
      vrenUrl: require("@/assets/images/serives/paiBanner.png"), //产品与服务
     
      // 祖先祭祀
      swiperoptionWorship: {
        slidesPerView: 2.5,
        spaceBetween: 16,
        mousewheelControl: true,
      },
      newsList: [
        {
          title: "迎神安座",
          newsUrl: require("@/assets/images/serives/01.png"),
        },
        {
          title: "藥師禮祀壇城",
          newsUrl: require("@/assets/images/serives/02.png"),
        },
      ],

      // 活动总览
      swiperoptionActivities: {
        slidesPerView: 2.5,
        spaceBetween: 16,
        mousewheelControl: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      slideDialog: false, //活动弹窗
      dialogWidth:1520,//弹窗宽度
      slides: [
        {
          swiperUrl: require("@/assets/images/serives/swiper_01.png"),
          title: "这里是活动大标题",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/serives/swiper_02.png"),
          title: "这里是活动大标题",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/serives/swiper_03.png"),
          title: "这里是活动大标题",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/serives/swiper_04.png"),
          title: "这里是活动大标题",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/serives/swiper_01.png"),
          title: "这里是活动大标题",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/serives/swiper_02.png"),
          title: "这里是活动大标题",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/serives/swiper_03.png"),
          title: "这里是活动大标题",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/serives/swiper_04.png"),
          title: "这里是活动大标题",
          time: "2024.05.23",
        },
      ],

      // 服务咨询
      activeName: "1", //手风琴
      serivesList: [
        {
          id: "1",
          title: "清明—讓我們緬懷先祖吧",
          content:
            "安世代ANSHIDAI全球華人百家姓祭祖平臺，採用的是線上線下融合客戶體驗的模式來運營的企業。安世代ANSHIDAI線下的奉祠祭祖基地“安世代百家姓宗祠”金剛安奉祖先神位奉祠空間，一期設在台北市三教山，陸續擴展到台灣中南部",
        },
        {
          id: "2",
          title: "清明—讓我們緬懷先祖吧",
          content:
            "安世代ANSHIDAI全球華人百家姓祭祖平臺，採用的是線上線下融合客戶體驗的模式來運營的企業。安世代ANSHIDAI線下的奉祠祭祖基地“安世代百家姓宗祠”金剛安奉祖先神位奉祠空間，一期設在台北市三教山，陸續擴展到台灣中南部",
        },
        {
          id: "3",
          title: "清明—讓我們緬懷先祖吧",
          content:
            "安世代ANSHIDAI全球華人百家姓祭祖平臺，採用的是線上線下融合客戶體驗的模式來運營的企業。安世代ANSHIDAI線下的奉祠祭祖基地“安世代百家姓宗祠”金剛安奉祖先神位奉祠空間，一期設在台北市三教山，陸續擴展到台灣中南部",
        },
      ],

      // 设置神位
      swiperoptionAbout: {
        slidesPerView: 2.5,
        spaceBetween: 16,
        mousewheelControl: true,
      },
      aboutList: [
        {
          title: "神位選擇",
          aboutUrl: require("@/assets/images/serives/xuanze.png"),
        },
        {
          title: "服務選擇",
          aboutUrl: require("@/assets/images/serives/jindu.png"),
        },
        {
          title: "合同生成",
          aboutUrl: require("@/assets/images/serives/hetong.png"),
        },
      ],
    };
  },
  created() {
    this.checkSwiper()
  },

  methods: {
    checkSwiper(){
      if(this.deviceType == 'web' || this.deviceType == 'ipad'){
        this.swiperoptionActivities.slidesPerView = 4
        this.dialogWidth = 1520
      }else{
        this.swiperoptionActivities.slidesPerView = 2.5
        this.dialogWidth = 350
      }
    },
    // 活动弹窗入口
    handleJoinSerives(slide, index) {
      this.slideDialog = true;
    },

    // 活动弹窗关闭
    handleClose() {
      this.slideDialog = false;
    },

    // 手风琴
    toggleCollapse(val) {
      this.activeName = val;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/viewCss/serives/serives.scss";
</style>